@import '~styles/config.scss';

.SelectAddressMap {
    width   : 100%;
    height  : 100%;
    position: relative;
    display : flex;

    .map {
        flex    : auto;
        height  : 100%;
        position: relative;
        z-index : 1;

    }

    .option {
        z-index       : 1;
        position      : relative;
        box-shadow    : 0px 0px 10px rgba(0, 0, 0, 0.1);
        padding       : 20px;
        box-sizing    : border-box;
        width         : 340px;
        flex          : none;
        height        : 100%;
        overflow      : hidden;
    }

    .search {
        box-shadow   : 0px 0px 10px rgba(0, 0, 0, 0.1);
        z-index      : 2;
        padding      : 4px;
        overflow     : hidden;
        border-radius: 6px;
        background   : rgba(255, 255, 255, 0.96);
        position     : absolute;
        top          : 20px;
        box-sizing   : border-box;
        left         : 20px;
        width        : 340px;

        .input {
            display: flex;
        }
    }

    .form {
        flex : none;
        width: 100%;
        height    : 300px;
    }

    .poisList {
        height    : calc(100% - 300px);
        width     : 100%;
        flex      : auto;


        overflow  : hidden;
        overflow-y: auto;

        .li {
            border    : 1px solid $--border-color-extra-light;
            background: #fff;
            margin-top: 10px;
            padding   : 10px;
            font-size : 12px;
        }
    }
}